<template>
  <div class="list" style="list-style-type:none;">
      <li class="item"
        v-for="(item, key) in alphabet"
        :key="item.id"
        @click="handleLetterClick"
        @touchstart="handleTouchStart"
        @touchmove="handleTouchMove"
        @touchend="handleTouchEnd"
      >
        {{key}}
      </li>
  </div>
</template>

<script>
export default {
  name: 'CityAlphabet',
  props: {
    alphabet: {
      typeof: Array
    }
  },
  data () {
    return {
      touchStatus: false
    }
  },
  methods: {
    handleLetterClick (e) {
      this.$emit('changeAlphabet', e.target.innerText)
    },
    handleTouchStart () {
      console.log(this.touch.clientX, 'start')
    },
    handleTouchMove () {
      console.log('move')
    },
    handleTouchEnd () {
      console.log('end')
    }
  }
}
</script>

<style lang="stylus" scope>
@import '~styles/varibles.styl'
@import '~styles/mixins.styl'
.list
 position: absolute
 right: .1rem
 top: 3.2rem
 color: $bgColor
 .item
  margin-top: .1rem
  text-align: center
</style>
